<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>角色管理</title>
	<meta name="decorator" content="nblank"/>
	<%@include file="/WEB-INF/views/include/treeview.jsp" %>
</head>
<body>
<div class="content container">
	<h2 class="page-title">角色管理<small> 角色添加</small></h2>
<section class="widget widget-tabs widget-table-overflow ">
	<header>
		<ul class="nav nav-tabs">
			<li><a href="${ctx}/sys/role/">角色列表</a></li>
			<li class="active"><a href="javascript:;">角色<shiro:hasPermission name="sys:role:edit">${not empty role.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="sys:role:edit">查看</shiro:lacksPermission></a></li>
		</ul>
	</header>
		<div class="body tab-content">
	<form:form id="inputForm" modelAttribute="role" action="${ctx}/sys/role/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<sys:message content="${message}"/>
		<div class="form-group">
			<label class="control-label col-sm-4">归属机构:</label>
			<div class="col-sm-4">
                <sys:treeselect id="office" name="office.id" value="${role.office.id}" labelName="office.name" labelValue="${role.office.name}"
					title="机构" url="/sys/office/treeData" cssClass="form-control input-transparent"/>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-4"><span><span style="color:red;">*</span></span> 角色名称:</label>
			<div class="col-sm-4">
				<input id="oldName" name="oldName" type="hidden" value="${role.name}">
				<form:input path="name" htmlEscape="false" maxlength="50" class="form-control input-transparent"/>
			</div>
		</div>
		<div class="form-group hide">
			<label class="control-label col-sm-4"><span><span style="color:red;">*</span></span> 英文名称:</label>
			<div class="col-sm-4">
				<input id="oldEnname" name="oldEnname" type="hidden" value="${role.enname}">
				<form:input path="enname" htmlEscape="false" maxlength="50" class="form-control input-transparent"/>
				 <span>工作流用户组标识</span>
			</div>
		</div>
		<div class="form-group hide">
			<label class="control-label col-sm-4"><span><span style="color:red;">*</span></span> 角色类型:</label>
			<div class="col-sm-4"><%--
				<form:input path="roleType" htmlEscape="false" maxlength="50" class="required"/>
				<span class="help-inline" title="activiti有3种预定义的组类型：security-role、assignment、user 如果使用Activiti Explorer，需要security-role才能看到manage页签，需要assignment才能claim任务">
					工作流组用户组类型（security-role：管理员、assignment：可进行任务分配、user：普通用户）</span> --%>
				<form:select path="roleType" data-style="btn-primary" data-width="auto" class="selectpicker">
					<form:option value="assignment">任务分配</form:option>
					<form:option value="security-role">管理角色</form:option>
					<form:option value="user">普通角色</form:option>
				</form:select>
				<span class="help-inline" title="activiti有3种预定义的组类型：security-role、assignment、user 如果使用Activiti Explorer，需要security-role才能看到manage页签，需要assignment才能claim任务">
					工作流组用户组类型（任务分配：assignment、管理角色：security-role、普通角色：user）</span>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-4">是否系统数据:</label>
			<div class="col-sm-4">
				<form:select path="sysData" data-style="btn-primary" data-width="auto" class="selectpicker">
					<c:forEach items="${fns:getDictList('yes_no')}" var="dict">
						<form:option value="${dict.value}" label="${dict.label}"/>
					</c:forEach>
				</form:select>
				<span class="help-inline">“是”代表此数据只有超级管理员能进行修改，“否”则表示拥有角色修改人员的权限都能进行修改</span>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-4">是否可用</label>
			<div class="col-sm-4">
				<form:select path="useable" data-style="btn-primary" data-width="auto" class="selectpicker">
					<c:forEach items="${fns:getDictList('yes_no')}" var="dict">
						<form:option value="${dict.value}" label="${dict.label}"/>
					</c:forEach>
				</form:select>
				<span class="help-inline">“是”代表此数据可用，“否”则表示此数据不可用</span>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-4">数据范围:</label>
			<div class="col-sm-4">
				<form:select path="dataScope" data-style="btn-primary" data-width="auto" class="selectpicker">
					<c:forEach items="${fns:getDictList('sys_data_scope')}" var="dict">
						<form:option value="${dict.value}" label="${dict.label}"/>
					</c:forEach>
				</form:select>
				<span class="help-inline">特殊情况下，设置为“按明细设置”，可进行跨机构授权</span>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-4">角色授权:</label>
			<div class="col-sm-4 widget">
				<div id="menuTree" class="ztree" style="margin-top:3px;float:left;"></div>
				<form:hidden path="menuIds"/>
				<div id="officeTree" class="ztree" style="margin-left:100px;margin-top:3px;float:left;"></div>
				<form:hidden path="officeIds"/>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-4">备注:</label>
			<div class="col-sm-4">
				<form:textarea path="remarks" htmlEscape="false" rows="3" maxlength="200" class="form-control input-transparent"/>
			</div>
		</div>
		<div class="form-actions">
			<div class="text-align-center">
				<input id="btnCancel" class="btn btn-default" type="button" style="margin-left: -50px;min-width:100px;" value="返 回" onclick="history.go(-1)"/>
				<input id="btnSubmit" class="btn btn-primary" style="margin-left:50px;min-width:100px;" type="submit" value="保 存"/>&nbsp;
			</div>
		</div>
	</form:form>
			</div>
		</section>
</div>
<script type="text/javascript">
	$(document).ready(function(){
		$("#name").focus();
		$("#inputForm").validate({
			rules: {
				name: {remote: "${ctx}/sys/role/checkName?oldName=" + encodeURIComponent("${role.name}")},
				enname: {remote: "${ctx}/sys/role/checkEnname?oldEnname=" + encodeURIComponent("${role.enname}")}
			},
			messages: {
				name: {remote: "角色名已存在"},
				enname: {remote: "英文名已存在"}
			},
			submitHandler: function(form){
				var ids = [], nodes = tree.getCheckedNodes(true);
				for(var i=0; i<nodes.length; i++) {
					ids.push(nodes[i].id);
				}
				$("#menuIds").val(ids);
				var ids2 = [], nodes2 = tree2.getCheckedNodes(true);
				for(var i=0; i<nodes2.length; i++) {
					ids2.push(nodes2[i].id);
				}
				$("#officeIds").val(ids2);
				loading('正在提交，请稍等...');
				form.submit();
			},
			errorContainer: "#messageBox",
			errorPlacement: function(error, element) {
				$("#messageBox").text("输入有误，请先更正。");
				if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
					error.appendTo(element.parent().parent());
				} else {
					error.insertAfter(element);
				}
			}
		});

		var setting = {check:{enable:true,nocheckInherit:true},view:{selectedMulti:false,fontCss: {color:"white"} },
			data:{simpleData:{enable:true}},callback:{beforeClick:function(id, node){
				tree.checkNode(node, !node.checked, true, true);
				return false;
			}}};

		// 用户-菜单
		var zNodes=[
				<c:forEach items="${menuList}" var="menu">{id:"${menu.id}", pId:"${not empty menu.parent.id?menu.parent.id:0}", name:"${not empty menu.parent.id?menu.name:'权限列表'}"},
			</c:forEach>];
		// 初始化树结构
		var tree = $.fn.zTree.init($("#menuTree"), setting, zNodes);
		// 不选择父节点
		tree.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
		// 默认选择节点
		var ids = "${role.menuIds}".split(",");
		for(var i=0; i<ids.length; i++) {
			var node = tree.getNodeByParam("id", ids[i]);
			try{tree.checkNode(node, true, false);}catch(e){}
		}
		// 默认展开全部节点
		tree.expandAll(true);

		// 用户-机构
		var zNodes2=[
				<c:forEach items="${officeList}" var="office">{id:"${office.id}", pId:"${not empty office.parent?office.parent.id:0}", name:"${office.name}"},
			</c:forEach>];
		// 初始化树结构
		var tree2 = $.fn.zTree.init($("#officeTree"), setting, zNodes2);
		// 不选择父节点
		tree2.setting.check.chkboxType = { "Y" : "ps", "N" : "s" };
		// 默认选择节点
		var ids2 = "${role.officeIds}".split(",");
		for(var i=0; i<ids2.length; i++) {
			var node = tree2.getNodeByParam("id", ids2[i]);
			try{tree2.checkNode(node, true, false);}catch(e){}
		}
		// 默认展开全部节点
		tree2.expandAll(true);
		// 刷新（显示/隐藏）机构
		refreshOfficeTree();
		$("#dataScope").change(function(){
			refreshOfficeTree();
		});
	});
	function refreshOfficeTree(){
		if($("#dataScope").val()==9){
			$("#officeTree").show();
		}else{
			$("#officeTree").hide();
		}
	}
</script>
</body>
</html>